<!-- fileinput -->
<link href="/vendors/bootstrap-fileinput/css/fileinput.css" rel="stylesheet"/>
<!--bootstrap-->
<link rel="stylesheet" type="text/css" href="/vendors/bootstrap/dist/css/bootstrap.css">
<div id="hotelFacilityDiv">
    <h4>设施与服务</h4>

    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <h5>设施</h5>
            <div v-for="(item,index) in facilityAndService.facilities">
                <div class="form-group">
                    <label>设施名称</label>
                    <input type="text" class="form-control" placeholder="请填写设施名称" v-model:value="item.facilityName">
                </div>
                <div class="form-group">
                    <label>设施相关图片</label>
                    <input class="hotelPolicyImage" name="file" type="file" multiple=true>
                </div>
            </div>
            <button onclick="addFacility()">添加设施</button>
            <button onclick="deleteFacility()">删除设施</button>
        </div>
    </div>

    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <h5>服务</h5>
            <div v-for="(item,index) in facilityAndService.services">
                <div class="form-group">
                    <label for="hotelService">服务名称</label>
                    <input type="text" class="form-control" id="hotelService" placeholder="请填写服务名称"
                           v-model:value="item.hServiceName">
                </div>
            </div>
            <button onclick="addService()">添加服务</button>
            <button onclick="deleteService()">删除服务</button>
        </div>
    </div>

    <!--按钮组-->
    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <button type="button" class="btn-primary" onclick="saveHotelFacility()">保存</button>
        </div>
    </div>
</div>
<!-- fileinput -->
<script src="/vendors/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="/vendors/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script>

<script>
    var hotelFacilityVue = new Vue({
        el: "#hotelFacilityDiv",
        data: {
            facilityAndService: {
                user: {
                    userId: $("#userId").val()
                },
                facilities: [
                    {
                        facilityName: "",
                        facilityImages: []
                    }
                ],
                services: [
                    {hServiceName: ""}
                ]
            }
        },
        methods: {
            initHotelPolicyImage: function () {
                var self = this;
                $(".hotelPolicyImage").each(function (index, item) {
                    $(item).fileinput({
                        language: "zh",
                        uploadUrl: "/api/upload/hotelFacility",
                        allowedFileExtensions: ["png", "jpg", "jpeg", "ico", "bmp", "gif"],
                        showUpload: true,
                        showRemove: false,
                        showPreview: true,
                        showCaption: true,
                        browseClass: "btn btn-primary",
                        removeClass: "btn btn-danger",
                        dropZoneEnabled: true,
                        maxFileCount: 5,
                        autoReplace: true,//是否可替换
                        layoutTemplates: {
                            actionUpload: ''
                        },
                        enctype: 'multipart/form-data',
                        msgFilesTooMany: "选择上传的文件数量 超过允许的最大数值！",
                        validateInitialCount: true,
                    }).on('fileerror', function (event, data, msg) {
                        layer.alert("Upload file failed" + msg, {icon: 0});
                    }).on('fileuploaded', function (event, data) {
                        if (data.response.status === 200) {
                            self.facilityAndService.facilities[index].facilityImages.push({"image": data.response.data})
                        } else {
                            $(".fileinput-remove-button").click();
                        }
                        layer.alert(data.response.message, {icon: 0});
                    }).on('fileclear', function (event) {
                    });
                })
            },
            addFacility: function () {
                var self = this;
                self.facilityAndService.facilities.push({
                    facilityName: "",
                    facilityImages: []
                });
                self.$nextTick(function () {
                    self.initHotelPolicyImage();
                })
            },
            deleteFacility: function () {
                var self = this;
                if (self.facilityAndService.facilities.length > 1) {
                    self.facilityAndService.facilities.splice(-1);
                }
            },
            addService: function () {
                var self = this;
                self.facilityAndService.services.push({
                    hServiceName: "",
                })
            },
            deleteService: function () {
                var self = this;
                if (self.facilityAndService.services.length > 1) {
                    self.facilityAndService.services.splice(-1);
                }
            },
            saveHotelFacility: function () {
                var self = this;
                console.log(self.facilityAndService.facilities);
                console.log(self.facilityAndService.services);
                var flag = false;
                var flag1 = false;
                $.each(self.facilityAndService.facilities, function (index, facility) {
                    if (facility.facilityName === "" || facility.facilityImages.length === 0) {
                        flag = true;
                    }
                });
                $.each(self.facilityAndService.services, function (index, service) {
                    if (service.hServiceName === "") {
                        flag1 = true;
                    }
                });
                if (flag || flag1) {
                    layer.alert("不能为空", {icon: 0});
                } else {
                    $.ajax({
                        url: "/api/facilityAndService",
                        type: "post",
                        contentType: "application/json",
                        data: JSON.stringify(self.facilityAndService),
                        success: function (rs) {
                            if (rs.status === 200) {
                                console.log("提交成功")
                                self.facilityAndService = {
                                    user: {
                                        userId: $("#userId").val()
                                    },
                                    facilities: [
                                        {
                                            facilityName: "",
                                            facilityImages: []
                                        }
                                    ],
                                    services: [
                                        {hServiceName: ""}
                                    ]
                                };
                                $(".fileinput-remove").click()
                                layer.alert("提交成功", {icon: 0});
                            } else {
                                layer.alert(rs.message, {icon: 0});
                            }
                        },
                        error: function (rs) {
                            layer.alert(rs.responseText, {icon: 0});
                        }
                    })
                }
            }
        },
        created: function () {
            window.saveHotelFacility = this.saveHotelFacility;
            window.addFacility = this.addFacility;
            window.deleteFacility = this.deleteFacility;
            window.addService = this.addService;
            window.deleteService = this.deleteService;
        },
        mounted: function () {
            this.initHotelPolicyImage();
        }
    })
</script>